<script setup>
import {ref, watch} from "vue";
import {CoffeeOutlined} from "@ant-design/icons-vue";
import {UserOutlined} from "@ant-design/icons-vue";
import router from '@/router'
import {useUserStore} from '@/stores/user';

const {userInfo, clearUserInfo} = useUserStore()

const selectedKeys = ref([]);

watch(() => router.currentRoute.value.path, (newValue) => {
  console.log('watch', newValue);
  selectedKeys.value = [];
  selectedKeys.value.push(newValue);
}, {immediate: true});

</script>

<template>
  <a-layout-header class="header">
    <div class="logo">
      <router-link to="/welcome" style="color: white; font-size: 18px">
        Intmall-12306
      </router-link>
    </div>
    <div style="float: right; color: white;">
      您好：{{ userInfo.mobile }} &nbsp;&nbsp;
      <router-link to="/login" @click.native="clearUserInfo()" style="color: white;">
        退出登录
      </router-link>
    </div>
    <a-menu
        v-model:selectedKeys="selectedKeys"
        theme="dark"
        mode="horizontal"
        :style="{ lineHeight: '64px' }"
    >
      <a-menu-item key="/welcome">
        <router-link to="/welcome">
          <coffee-outlined/> &nbsp; 欢迎
        </router-link>
      </a-menu-item>
      <a-menu-item key="/passenger">
        <router-link to="/passenger">
          <user-outlined/> &nbsp; 乘车人管理
        </router-link>
      </a-menu-item>
    </a-menu>
  </a-layout-header>
</template>

<style scoped>
.logo {
  float: left;
  height: 31px;
  width: 150px;
  color: white;
  font-size: 20px;
}
</style>